<script>
import {reactive,toRefs,onMounted} from "vue";
import axios from 'axios'
export default {
  name: "StudentView",
  setup(){
    const data=reactive({
      formInline:{
        studentname: ''
      },
      pageNum:1,
      tableData:[],
      total:0,
      pages:0
    })
    const onSubmit = () => {
      data.pageNum=1
      getBackData()
      // axios({
      //   url:'/api/'
      // })
    }
    onMounted(function (){
      getBackData()
    })
    const changePage = (pageNo) => {
      data.pageNum=pageNo
      getBackData()
    }
    const getBackData = () => {
      axios({
        url:'/api/student?stuName='+data.formInline.studentname+'&pageNum='+data.pageNum,
        method:'get'
      }).then(function (result){
        data.tableData=result.data.data.records
        data.pageNum=result.data.data.current
        data.total=result.data.data.total
        data.pages=result.data.data.pages
      })
    }
    return{
      ...toRefs(data),
      getBackData,
      onSubmit,
      changePage
    }
  }
}
</script>

<template>
<div>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="学生姓名">
      <el-input v-model="formInline.studentname" placeholder="请输入学生姓名" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="编号"/>
    <el-table-column prop="studentname" label="姓名"/>
    <el-table-column prop="gender" label="性别"/>
    <el-table-column prop="age" label="年龄"/>
    <el-table-column prop="address" label="家庭住址"/>
    <el-table-column label="操作">
       <template #default="scope">
         <el-button type="primary" @click="onEdit(scope.row)">编辑</el-button>
         <el-button type="primary" @click="onDel(scope.row.id)">删除</el-button>
       </template>
    </el-table-column>
  </el-table>
  <el-pagination background
                 layout="total, prev, pager, next , jumper"
                 :total="total"
                 :page-count="pages"
                 :current-page="pageNum"
                 @current-change="changePage" ></el-pagination>
</div>
</template>

<style scoped lang="scss">

</style>